<template>
  <div class="app-container">
    <!-- :disabled="$route.query.isInfo" -->
    <el-form ref="elForm" :model="formData" :rules="rules" size="medium" label-width="170px">
      <h1 style="text-align: center; font-weight: bold">设备信息卡</h1>

      <el-row :gutter="20" type="flex" align="middle">
        <el-col span="10">
          <h2 style="text-align: left; font-weight: bold">设备编号：{{ formData.deviceCode }}</h2>
        </el-col>
        <el-col span="10">
          <h2 style="text-align: left; font-weight: bold">设备名称：{{ formData.deviceName }}</h2>
        </el-col>
        <el-col span="10">
          <h2 style="text-align: left; font-weight: bold">
            设备状态：
            <el-tag size="medium" style="margin-left: " :type="formData.status == 1
              ? 'success'
              : formData.status == 4
                ? 'danger'
                : formData.status == 3
                  ? 'warning'
                  : formData.status == 0
                  ? 'info'
                  : 'success'
              ">{{ formData.statusName }}</el-tag>
          </h2>
        </el-col>
        <el-col span="4">
          <vue-qr :text="textUrl" :size="150"></vue-qr>
        </el-col>
      </el-row>
      <h4 class="form-header h4">基本信息</h4>

      <el-row :gutter="15">
        <el-col :span="8">
          <ImagePreview :src="$VUE_APP_IMG_API + formData.image"></ImagePreview>
        </el-col>
        <el-col :span="16">
          <el-row :gutter="15">
            <el-col :span="12">
              <el-form-item label="所属部门:">{{ formData.deptName }}</el-form-item>
            </el-col>
            <el-col :span="12">
              <el-form-item label="测量范围:">{{ formData.checkScope }}</el-form-item>
            </el-col>
            <el-col :span="12">
              <el-form-item label="所在位置:">{{ formData.site }}</el-form-item>
            </el-col>
            <el-col :span="12">
              <!-- <el-form-item label="涉及领域:">{{ formData.concernFieldLabel }}</el-form-item> -->
              <el-form-item label="涉及领域:">{{ formData.highway=='true' ? '公路工程，' : '' }}{{  formData.water=='true' ? '水运工程，' : '' }}{{ formData.build=='true' ? '建设工程' : '' }}</el-form-item>
            </el-col>
            <el-col :span="12">
              <el-form-item label="涉及项目:">{{ formData.otherExplain }}</el-form-item>
            </el-col>
            <el-col :span="12">
              <el-form-item label="扩展不确定度:">{{ formData.checkLevel }}</el-form-item>
            </el-col>
            <el-col :span="12">
              <el-form-item label="管理人:">{{ formData.managerUserName }}</el-form-item>
            </el-col>
            <el-col :span="12">
              <el-form-item label="分度值:">{{ formData.scaleValue }}</el-form-item>
            </el-col>
            <el-col :span="12">
              <el-form-item label="型号:">{{ formData.spec }}</el-form-item>
            </el-col>
            <el-col :span="12">
              <el-form-item label="精度:">{{ formData.scale }}</el-form-item>
            </el-col>
            <el-col :span="12">
              <el-form-item label="生产厂家:">{{ formData.manufacturer }}</el-form-item>
            </el-col>
            <el-col :span="12">
              <el-form-item label="溯源方式:">
                {{
                  checkDict(dict.type.sys_trace_method, formData.traceMethod)
                }}
              </el-form-item>
            </el-col>
            <el-col :span="12">
              <el-form-item label="出厂编号:">{{ formData.code }}</el-form-item>
            </el-col>
            <el-col :span="12">
              <el-form-item label="说明书:">
                <el-link type="primary" @click="handleLink(formData.checks.assignmentUrl)">{{
                  getFileName(formData.checks.assignmentUrl) }}</el-link>
              </el-form-item>
            </el-col>
            <el-col :span="12">
              <el-form-item label="维修保养内容:">{{ formData.careContent }}</el-form-item>
            </el-col>
            <el-col :span="12">
              <el-form-item label="合格证:">
                <el-link type="primary" @click="handleLink(formData.operateUrl)">{{ getFileName(formData.operateUrl)
                }}</el-link>
              </el-form-item>
            </el-col>

            <el-col :span="12">
              <el-form-item label="维修保养周期:">{{ formData.carePeriod }}个月</el-form-item>
            </el-col>
            <el-col :span="12">
              <el-form-item label="作业指导书:">
                <el-link v-if="formData.oss&&formData.oss.length>0" type="primary" @click="handleLink(formData.oss[0].url)">{{ getFileName(formData.oss[0].url)
                }}</el-link>
                <div v-else> --</div>
              </el-form-item>
            </el-col>
            <el-col :span="12">
              <el-form-item label="操作视频:">
                <el-link type="primary" @click="handleLink(formData.videoUrl)">{{ getFileName(formData.videoUrl)
                }}</el-link>
              </el-form-item>
            </el-col>
          </el-row>
        </el-col>
      </el-row>
      <h4 class="form-header h4">检定校准信息</h4>
      <el-row>
        <el-col span="8">
          <el-form-item label="上次检定/校准日期:">{{ (itemsInfo && itemsInfo.checkDate) || "--" }}</el-form-item>
        </el-col>
        <el-col span="8">
          <el-form-item label="周期:">{{ (formData && formData.checkPeriod) || "--" }}个月</el-form-item>
        </el-col>
        <el-col span="8">
          <el-form-item label="下次检定/校准日期:">{{ (itemsInfo && itemsInfo.effectDate) || "--" }}</el-form-item>
        </el-col>
      </el-row>
      <el-row :gutter="15">
        <el-col span="8">
          <el-form-item label="检定方式:">{{ formData.checkType == 1 ? "准用" : "检定" }}</el-form-item>
        </el-col>
        <el-col span="8">
          <el-form-item label="检定证书:">
            <el-link type="primary" @click="handleLink(item.url)" v-for="item in itemsInfo.oss || []">{{ item.fileName
            }}</el-link>
          </el-form-item>
        </el-col>
        <el-col span="8">
          <el-form-item label="检定/校准单位:" v-for="dict in dict.type.sys_organ_type" v-if="formData.deviceCheckCertVos.length>0&&dict.value == formData.deviceCheckCertVos[0].organ">{{ dict.label }}</el-form-item>
        </el-col>
        <el-col span="8">
          <el-form-item label="确认表:">
            <el-link type="success" @click="handlePrint('confirm')" v-if="formData.confirms.length">预览</el-link>
            <span v-else>--</span>
          </el-form-item>
        </el-col>
        <el-col span="8">
          <el-form-item label="检定/校准员:">{{ itemsInfo.checkUserName || "--" }}</el-form-item>
        </el-col>

        <el-col span="8" v-hasPermi="['equipment:all:manger']">
          <el-form-item label="要求表:">
            <el-link type="success" @click="handlePrint('checkAsk')" v-if="formData.deviceCheckAskId">预览</el-link>
            <span v-else>--</span>
          </el-form-item>
        </el-col>
        <el-col span="8">
          <el-form-item label="证书编号:">{{ itemsInfo.certCode || "--" }}</el-form-item>
        </el-col>
      </el-row>
      <div v-hasPermi="['equipment:all:manger']">
        <h4 class="form-header h4" >购置信息</h4>
        <el-row :gutter="15" >
          <el-col span="8" >
            <el-form-item label="购置审批表:">
              <el-link type="success" @click="handlePrint('buy')">预览</el-link>
            </el-form-item>
          </el-col>
          <el-col span="8">
            <el-form-item label="申购日期:">{{ (formData && formData.applyTime.substr(0,11)) || "--" }}</el-form-item>
          </el-col>
          <el-col span="8">
            <el-form-item label="到货日期:">{{ (formData.checks && formData.checks.checkDate) || "--" }}</el-form-item>
          </el-col>
        </el-row>
        <el-row :gutter="15">
          <el-col span="8">
            <el-form-item label="验收设备记录表:">
              <el-link type="success" @click="handlePrint('check')">预览</el-link>
            </el-form-item>
          </el-col>
          <el-col span="8">
            <el-form-item label="出厂日期:">{{ formData.factoryDate || "--" }}</el-form-item>
          </el-col>
          <el-col span="8">
            <el-form-item label="供应商:">{{ formData.supplierName || "--" }}</el-form-item>
          </el-col>
        </el-row>
        <el-row :gutter="15">
          <el-col span="8">
            <el-form-item label="设备情况登记表:">
              <el-link type="success" @click="handlePrint('register')">预览</el-link>
            </el-form-item>
          </el-col>
          <el-col span="8">
            <el-form-item label="购置日期:">{{ (formData.checks && formData.checks.buyDate) || "--" }}</el-form-item>
          </el-col>
          <el-col span="8">
            <el-form-item label="供应商联系方式:">{{ formData.phone || "--" }}</el-form-item>
          </el-col>
        </el-row>
        <el-row :gutter="15">
          <el-col span="8">
            <el-form-item label="设备停用/报废/恢复使用:">
              <el-link type="danger" @click="handlePrint('status')" v-if="formData.deviceStatusId">设备停用/报废/恢复使用</el-link>
              <span v-else>--</span>
            </el-form-item>
          </el-col>
         
         
          <el-col span="8">
            <el-form-item label="其他说明:">
              <el-input v-model="formData.otherDesc" placeholder="请输入其他说明"></el-input>
              <!-- {{ (formData.checks && formData.checks.remark) || "--" }} -->
            </el-form-item>
          </el-col>
        </el-row>
        <el-row :gutter="15">
          <el-col span="8">
            <!-- {{ (formData && formData.price) || "--" }} -->
            <el-form-item label="价格:">
              <el-input v-model="formData.invoicePrice" placeholder="请输入价格"></el-input>
              </el-form-item>
          </el-col>
          <el-col span="8">
            <!-- <el-form-item
              label="开票日期:"
            >{{ (formData.checks && formData.checks.invoiceTime) || "--" }}</el-form-item> -->
            <el-form-item label="开票日期" prop="invoiceTime">
              <el-date-picker v-model="formData.invoiceTime" format="yyyy-MM-dd" value-format="yyyy-MM-dd"
                :style="{ width: '100%' }" placeholder="请选择开票日期" clearable></el-date-picker>
            </el-form-item>
          </el-col>
          <el-col span="8">
            <el-form-item label="报销凭证编号:">
              <el-input v-model="formData.invoiceCode" placeholder="请输入报销凭证编号"></el-input>
            </el-form-item>
          </el-col>
         
        </el-row>

      <el-row :gutter="15">
        <el-col span="8">
          <el-form-item label="发票:">
            <!-- <el-link
              type="primary"
              @click="handleLink(formData.checks.invoiceUrl)"
            >{{ getFileName(formData.checks.invoiceUrl) }}</el-link> -->
            <el-form-item label="" prop="invoiceUrl">
              <FileUpload  v-model="formData.invoiceUrl"></FileUpload>
            </el-form-item>
          </el-form-item>
        </el-col>
        <el-col span="8">
            <el-form-item label="合同:">
              <!-- <el-link type="primary" @click="handleLink(formData.contractUrl)">{{ getFileName(formData.contractUrl)
              }}</el-link> -->
              <el-form-item label="" prop="contractUrl">
              <FileUpload :isDelete="!$route.query.isInfo" v-model="formData.contractUrl"></FileUpload>
            </el-form-item>
            </el-form-item>
          </el-col>
      
      </el-row>
    </div>

      <el-col :span="24">
        <el-form-item label-width="0" style="text-align: center; margin-top: 30px">
          <el-button type="primary" @click="submitForm">提交</el-button>
          <el-button :disabled="false" @click="resetForm">返回</el-button>
        </el-form-item>
      </el-col>
    </el-form>
    <buy ref="buy"></buy>
    <check ref="check"></check>
    <register ref="register"></register>
    <status ref="status"></status>
    <checkAsk ref="checkAsk"></checkAsk>
    <confirm ref="confirm"></confirm>
  </div>
</template>

<script>
import { deviceInfo, updateByBodevice } from "@/api/device/device.js";
import buy from "./components/buy.vue";
import check from "./components/check.vue";
import register from "./components/register.vue";
import status from "./components/status.vue";
import checkAsk from "./components/checkAsk.vue";
import confirm from "./components/confirm.vue";

export default {
  props: [],
  dicts: ["sys_manufacturer_list", "sys_site_list", "sys_trace_method",'sys_organ_type'],
  components: {
    buy,
    check,
    register,
    status,
    checkAsk,
    confirm
  },

  data() {
    return {
      formData: {
        userId: undefined,
        deptId: undefined,
        oss: undefined,
        contentList: [],
        checks: {}
      },
      textUrl: "",
      itemsInfo: {},
      confirmInfo: {}
    };
  },
  computed: {},
  created() {
    this.getinfo();
  },
  mounted() {
   },
  methods: {
    submitForm() {
      updateByBodevice(this.formData).then((res) => {
        if (res.code == 200) {
          this.$message.success(res.msg)
        }
      })
    },
    checkName(e) {
      console.log(e.oss, "chec");
    },
    handlePrint(e) {
      this.$nextTick(() => {
        if (e == "buy") {
          this.$refs[e].printBox(this.formData.deviceBuyId);
        } else if (e == "check") {
          this.$refs[e].printBox(this.formData.deviceCheckId);
        } else if (e == "register") {
          this.$refs[e].printBox(this.formData.deviceId);
        } else if (e == "status") {
          this.$refs[e].printBox(this.formData.deviceStatusId);
        } else if (e == "checkAsk") {
          this.$refs[e].printBox(this.formData.deviceCheckAskId);
        } else if (e == "confirm") {
          this.$refs[e].printBox(
            this.formData.confirms[0].deviceResultConfirmId
          );
        }
      });
    },
    // 获取文件名称
    getFileName(name) {
      if (!name) {
        return "--";
      }
      // 如果是url那么取最后的名字 如果不是直接返回
      if (name.lastIndexOf("/") > -1) {
        return name.slice(name.lastIndexOf("/") + 1);
      } else {
        return name;
      }
    },
    handleLink(e) {
      window.open(this.$VUE_APP_IMG_API + e);
    },
    getinfo() {
      deviceInfo(this.$route.query.id).then(response => {
        this.formData = response.data;
        if (response.data.deviceCheckCertVos.length) {
          this.itemsInfo =
            response.data.deviceCheckCertVos[0];
        }
        if (response.data.confirms.length) {
          this.confirmInfo =
            response.data.confirms[response.data.confirms.length - 1];
        }

        this.textUrl =
          process.env.VUE_APP_CODE_API +
          "deviceDetail?id=" +
          response.data.deviceId;
      });
    },
    resetForm() {
      this.$tab.closeOpenPage();
    }
  }
};
</script>
